<!DOCTYPE html>
<html>
<head>
	<title>EaselJS: Simple SpriteSheet Example</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script type="text/javascript">

		function init() {

			// create a new stage and point it at our canvas:
			var stage = new createjs.Stage(document.getElementById("testCanvas"));

			// Define a spritesheet. Note that this data was exported by Zoë.
			var ss = new createjs.SpriteSheet({
				"animations":
				{
					"run": [0, 25, "jump"],
					"jump": [26, 63, "run"]},
					"images": ["assets/runningGrant.png"],
					"frames":
						{
							"height": 292.5,
							"width":165.75,
							"regX": 0,
							"regY": 0,
							"count": 64
						}
				});

			var grant = new createjs.BitmapAnimation(ss);
			grant.x = 360;
			grant.y = 22;

			grant.gotoAndPlay("run");

			// Add Grant to the stage, and add it as a listener to Ticker to get updates each frame.
			stage.addChild(grant);
			createjs.Ticker.setFPS(60);
			createjs.Ticker.addListener(stage);
		}

	</script>
</head>
<body onload="init();">

	<header id="header" class="EaselJS">
		<h1><span class="text-product">Easel<strong>JS</strong></span> Simple SpriteSheet Example</h1>
		<p>A simple example of a sprite sheet using <strong>BitmapAnimation</strong>. This demos also shows playing named
			animations (jump and run), and animation chaining using <strong>getAnimation("name").next</strong>.</p>
	</header>

	<div class="canvasHolder">
		<canvas id="testCanvas" width="960" height="400"></canvas>
	</div>
</body>
</html>